import { Component, ReactNode } from "react";
import TabBar from "./tabBar";
import { cateApi } from "./api/productApi";
import { iProductType } from "./models/productType";
import "./category.css";
interface iState {
  cateList: string[];
  currentIndex: number;
}
export default class Cate extends Component {
  render(): React.ReactNode {
    return (
      <>
        <div className="App">
          <Header></Header>
          <Main></Main>
          <TabBar></TabBar>
        </div>
      </>
    );
  }
}

class Header extends Component {
  render(): ReactNode {
    return (
      <>
        <header>分类</header>
      </>
    );
  }
}
class Main extends Component {
  state: iState = {
    cateList: [],
    currentIndex: 0,
  };

  async componentDidMount() {
    // cateApi().then(res=>{
    //     console.log(res);

    // })
    const res = await cateApi();
    console.log(res);

    const myData: iProductType<string[]> = res.data;

    this.setState({
      cateList: myData.data,
    });
  }

  render(): ReactNode {
    const { cateList, currentIndex } = this.state;
    return (
      <main>
        <div className="left">
          {cateList.map((item: string, index: number) => {
            return (
              <div
                key={index}
                className="newlistItem"
                style={{
                  backgroundColor: currentIndex === index ? "#fff" : "#f5f6f8",
                }}
              >
                <div className="line" style={{width:'8px',height:"100%", backgroundColor:currentIndex===index?'#eb706b':'', marginRight:"15px"}}></div>
                <p style={{fontWeight: currentIndex === index ? "700" : "400"}}
                  onClick={() => {
                    this.setState({
                      currentIndex: index,
                    });
                  }}
                >
                  {item}
                </p>
              </div>
            );
          })}
        </div>
        <div className="right">
            {/* 头部为品牌列表 */}
        </div>
      </main>
    );
  }
}
